<template>
  <view class="bg-white">
    <view class="header">
      <view class="search-box">
        <input
          type="text"
          confirm-type="search"
          v-model="searchKey"
          @confirm="search"
          maxlength="12"
          class="search-input flex-1"
          placeholder="请输入关键字搜索"
        />
        <view class="suffix" @click="search">
          <u-icon size="26" color="#b7b7b7" name="search"></u-icon>
        </view>
      </view>
    </view>

    <mt-sidebar :sliderColor="config.theme.color" ref="sidebarRef" />

    <!-- 分类 -->
  </view>
</template>

<script lang="ts" setup>
  import MtSidebar from '@/components/mt-sidebar/mt-sidebar.vue';
  import { ref } from 'vue';
  import { report } from '@/utils/exception';
  import { config } from '@/config/env';
  import { getGoodsListCategory as getDataApi } from '@/api/goods/index';
  import type { CategoryGoodsList } from '@/types/goods';

  const sidebarRef = ref();
  const list = ref<CategoryGoodsList[]>([]);
  const searchKey = ref<string>('');
  let searchKeyTemp = '';

  const search = () => {
    if (searchKey.value == searchKeyTemp) return false;
    searchKeyTemp = searchKey.value;
    sidebarRef.value.searchData(searchKey.value);
  };

  const getData = () => {
    getDataApi()
      .then((res) => {
        list.value = res.data;
        sidebarRef.value.setSidebarData(list.value);
      })
      .catch((err) => {
        report(err);
      });
  };

  getData();
</script>

<style lang="scss" scoped>
  .header {
    z-index: 1;
    display: flex;
    height: 110rpx;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    // box-shadow: rgba(149, 157, 165, 0.1) 0px 5px 8px;

    .search-box {
      display: flex;
      width: 100%;
      margin: 0 30rpx;
      background: #f3f3f3;
      padding: 15rpx 30rpx;
      border-radius: 100rpx;

      .search-input {
        font-size: 26rpx;
        color: #9f9f9f;
      }

      .suffix {
        padding-left: 15rpx;
      }
    }
  }
</style>
